<!-- 这个封装的是Watch More按钮组件  -->
<script setup>
// import { getCurrentInstance } from 'vue'
const cxt = getCurrentInstance() // context === vue2 this
const bus = cxt.appContext.config.globalProperties.$bus
import 'animate.css';

const props = defineProps({
  pageId: {
    type: String,
    default: null
  }
})

let flag = ref(false)
function onMouseEnter() {
  flag.value = true
}
function onMouseLeave() {
  flag.value = false
}
const openNewTab = (() => {
  window.open('https://noword.tech/', '_blank');
})

</script>

<template>
  <div class="customButton animate__animated animate__fadeIn" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"
    @click="openNewTab">
    <div :class="{ triangle: flag, triangleLeave: !flag }"></div>
    <div class="text" style="font-size: 0.8em;">To Wenwu</div>
  </div>
</template>

<style scoped lang="scss">
.customButton {
  background-color: white;
  color: #67676C;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.3vh 4vw 1.3vh 4vw;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s ease 0s;

  border-radius: 5px;
}

.customButton.animate__fadeIn {
  animation-delay: 1s;
  animation-duration: 3s;
  /* 设置为1秒，你可以根据需要调整持续时间 */
}

.customButton::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 100%;
  left: 0;
  // background-color: rgba(65, 105, 225, 1);
  background-color: #CAAEE1;

  transition: all 0.5s ease 0s;

}

.customButton:hover::before {
  width: 100%;
}

.customButton:hover {
  cursor: pointer;
}

.customButton:hover .wacth {
  /* // 父子之间的hover调用 */
  color: white;
}

.triangle:hover+.wacth {
  /* // 兄弟之间的hover调用 */
  color: white;
  transition: all 0.5s ease 0s;
}

.triangle {
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  // border-left: 11px solid rgba(65, 105, 225, 1);
  border-left: 11px solid #CAAEE1;
  border-right: 11px solid transparent;
  position: absolute;
  left: 90%;
  animation: triangleMove 0.5s ease-in-out forwards;
  -webkit-animation: triangleMove 0.5s ease-in-out forwards;
  -moz-animation: triangleMove 0.5s ease-in-out forwards;
}

.triangleLeave {
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 11px solid #CAAEE1;
  position: absolute;
  left: 5%;
  animation: triangleLeave 0.3s ease-in-out forwards;
  -webkit-animation: triangleLeave 0.3s ease-in-out forwards;
  -moz-animation: triangleLeave 0.3s ease-in-out forwards;
}

@keyframes triangleMove {
  0% {
    left: 5%;
    border-left: 11px solid #CAAEE1;
  }

  100% {
    left: 90%;
    border-left: 11px solid rgb(255, 255, 255);
  }
}

@keyframes triangleLeave {
  0% {
    left: 90%;
    border-left: 11px solid rgb(255, 255, 255);
  }

  100% {
    left: 5%;
    border-left: 11px solid #CAAEE1;
  }
}
</style>